<template>
    <div class="wrapper-pratice">
         <van-nav-bar
          title="练习"
        />
        <div class="lattice">
          <van-grid :border="false" style="border-ridus:.5rem">
            <van-grid-item icon="apps-o"  text="考点练习"  @click="$router.push('/point')"/>
            <van-grid-item icon="description" text="套卷练习" />
            <van-grid-item icon="records" text="仿真考试" />
            <van-grid-item icon="failure" text="错题练习" />
            <van-grid-item icon="notes-o" text="测评记录" />
            <van-grid-item icon="flower-o" text="习题收藏" />
          </van-grid>
        </div>

        <div class="simulation">
          <p class="title">近期模考</p>
          <p class="titles">
            <span class="span">默认排序</span>
            <span class="span2">时间</span>
          </p>
          <div class="content">
            <van-empty description="暂无安排，敬请期待 ~" />
          </div>
        </div>
        <tabs></tabs>
    </div>
</template>

<script>
import tabs from "../components/tabs";
export default {
  components: {
    tabs
  }
};
</script>

<style lang="scss" scoped>
.wrapper-pratice{
  width: 100%;
  min-height:98vh; 
  .lattice{
    width: 100%;
    height: 5rem;
    box-sizing: border-box;
    background: #fff;
    ::v-deep .van-icon-apps-o{
      color: skyblue;
    }
    ::v-deep .van-icon-description{
      color: red;
    }
    ::v-deep .van-icon-records{
      color: orange;
    }
    ::v-deep .van-icon-failure{
      color: skyblue;
    }
    ::v-deep .van-icon-notes-o{
      color: rgb(10, 245, 10);
    }
    ::v-deep .van-icon-flower-o{
      color: rgb(243, 243, 36);
    }
  }
  .simulation{
    width: 100%;
    margin-top: 1rem;
    
    background: #fff;
    box-sizing: border-box;
    padding: .3rem;
    .title{
      width:100%;
      font-size: .4rem;
      color: #aaa;
    }
    .titles{
      width: 100%;
      margin-top: .3rem;
      .span{
        color: red;
      }
      .span2{
        float:right;
      }
      .content{
        background: skyblue;
        width: 100%;
        
      }
    }
  }
}
</style>